<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
    <div class="login-form" [hidden]='isShowLogin==true'>
        <h1 class="margin">登录</h1>
        <div class="row newsitems">
            <div class="login">
                <div class="login-item">
                    <label for="">用户名</label>
                    <input type="text" [(ngModel)]='username' />
                </div>
                <div class="login-item">
                    <label for="">密码</label>
                    <input type="password"  [(ngModel)]='password' />
                </div>
                <div class="login-item">
                    <div class="button" (click)="submit()">登录</div>
                </div>
                <div class="login-item">
                    <span (click)='singup()'>注册</span>
                </div>
            </div>
        </div>
    </div>

    <div class="users-form" [hidden]='isSingup==true'>
        <h2>注册用户</h2>
        <div class="signup">
            <div class="signup-item">
                <label for="">用户名</label>
                <input type="text" name="username" [(ngModel)]='newusername' />
            </div>
            <div class="signup-item">
                <label for="">密码</label>
                <input type="text" name="password" [(ngModel)]='newpassword' />
            </div>
            <div class="signup-item">
                <label for="">邮箱</label>
                <input type="text" name="email" [(ngModel)]='newemail' />
            </div>
            <div class="signup-item">
                <label for="">姓</label>
                <input type="text" name="firstname" [(ngModel)]='newfirstname' />
            </div>
            <div class="signup-item">
                <label for="">名</label>
                <input type="text" name="lastname" [(ngModel)]='newlastname'/>
            </div>
            <div class="signup-item">
                <div class="button" (click)='newuser()'>注册</div>
            </div>
        </div>
    </div>

    <div class="users-form" [hidden]='isShowUsers==true'>
        <h2>用户列表</h2>
        <div class="datas">
            <div class="title">
                <div class="item id">ID</div>
                <div class="item username">用户名</div>
                <div class="item firstname">姓</div>
                <div class="item lastname">名</div>
                <div class="item email">邮箱</div>
                <div class="item isadmin">是否管理员</div>
                <div class="item action">操作</div>
            </div>
            <div class="body">
                <div class="body-item" *ngFor='let user of users'>
                    <div class="cc id">
                        <input type="checkbox" name="" id="{{user.id}}" />
                    </div>
                    <div class="cc username">{{user.username}}</div>
                    <div class="cc firstname">{{user.firstname}}</div>
                    <div class="cc lastname">{{user.lastname}}</div>
                    <div class="cc email">{{user.email}}</div>
                    <div class="cc isadmin">{{user.isadmin}}</div>
                    <div class="cc action buttons">
                        <div class="button edit" (click)='deleteuser(user.id)'>删除</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="users-form" [hidden]='isShowTags==true'>
        <h2>tag列表</h2>
        <div class="datas">
            <div class="title">
                <div class="item">ID</div>
                <div class="item">tag标题</div>
                <div class="item">tag描述</div>
                <div class="item action">操作</div>
            </div>
            <div class="body">
                <div class="body-item" *ngFor='let tag of tags'>
                    <div class="cc2 id">
                        <input type="checkbox" name="" id="{{tag.id}}" />
                    </div>
                    <div class="cc2 name">{{tag.name}}</div>
                    <div class="cc2 desc">{{tag.desc}}</div>
                    <div class="cc2 buttons cc action">
                        <div class="button edit" (click)='deletetag(tag.id)'>删除</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
